<template>
  <a-drawer
    v-model:visible="opened"
    :width="appStore.deviceType === 'mobile' ? '75%' : '280px'"
    closable
    placement="right"
    title="系统设置"
  >
    <Scrollbar class="wrapper">
      <a-divider dashed>主题设置</a-divider>
      <div class="flex justify-around pb-8">
        <div v-for="(item, index) of themeList" :key="index" class="example-wrapper">
          <StyleExample
            :checked="item.checked"
            :left-bg="item.leftBg"
            :right-bottom-bg="item.rightBottomBg"
            :right-top-bg="item.rightTopBg"
            :tip-text="item.tipText"
            @click="themeClick(item)"
          />
        </div>
      </div>
      <a-divider dashed>侧边栏样式</a-divider>
      <div class="flex justify-around pb-8">
        <div
          v-for="(item, index) of sideExampleList"
          :key="index"
          :span="6"
          class="example-wrapper"
        >
          <StyleExample
            :checked="item.checked"
            :left-bg="item.leftBg"
            :right-bottom-bg="item.rightBottomBg"
            :right-top-bg="item.rightTopBg"
            @click="exampleClick(item)"
          />
        </div>
      </div>
      <a-divider dashed>布局模式</a-divider>
      <div class="flex justify-around pb-8">
        <div v-for="(item, index) of layoutExampleList" :key="index" class="example-wrapper">
          <StyleExample
            :checked="item.checked"
            :class="[item.class || '']"
            :left-bg="item.leftBg"
            :right-bottom-bg="item.rightBottomBg"
            :right-top-bg="item.rightTopBg"
            :tip-text="item.tipText"
            @click="layoutExampleClick(item)"
          />
        </div>
      </div>
      <div style="height: 20px"></div>
      <a-divider dashed>主题颜色</a-divider>
      <a-row :gutter="[10, 10]">
        <a-col v-for="(item, index) of primartyColorList" :key="index" :span="4">
          <div
            :class="{ circle: item.checked }"
            :style="{ backgroundColor: item.value }"
            class="color-wrapper"
            @click="colorClick(item)"
          ></div>
        </a-col>
      </a-row>
      <div style="height: 20px"></div>
      <a-divider dashed>菜单设置</a-divider>
      <div class="setting-item-wrapper">
        <span style="width: 100px">菜单宽度</span>
        <a-input-number v-model="menuWidth" :max="400" :min="200" :step="10" size="small" />
      </div>
      <a-divider dashed>页面切换动画</a-divider>
      <div class="setting-item-wrapper">
        <span style="width: 100px">动画效果</span>
        <a-select v-model="appStore.pageAnim" :options="animOptions" @change="onAnimUpdate" />
      </div>
      <a-divider dashed>按钮显示</a-divider>
      <div class="setting-item-wrapper">
        <span>固定顶部导航</span>
        <a-switch v-model="appStore.isFixedNavBar" :disabled="appStore.layoutMode === 'ttb'" />
      </div>
      <div class="setting-item-wrapper">
        <span>搜索</span>
        <a-switch v-model="appStore.actionBar.isShowSearch" />
      </div>
      <div class="setting-item-wrapper">
        <span>消息</span>
        <a-switch v-model="appStore.actionBar.isShowMessage" />
      </div>
      <div class="setting-item-wrapper">
        <span>刷新</span>
        <a-switch v-model="appStore.actionBar.isShowRefresh" />
      </div>
      <div class="setting-item-wrapper">
        <span>全屏</span>
        <a-switch v-model="appStore.actionBar.isShowFullScreen" />
      </div>
      <a-divider />
    </Scrollbar>
  </a-drawer>
</template>

<script lang="ts">
  import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { ModalDialogType } from '@/types/components'
  import { useMenuWidth } from '@/hooks/useMenuWidth'
  import LeftBg from '@/assets/bg_img.webp'
  import useAppConfigStore from '@/store/modules/app-config'
  import { ThemeMode } from '@/store/types'

  export default defineComponent({
    name: 'Setting',
    setup() {
      const appInfoDialog = ref<ModalDialogType | null>()
      const opened = ref(false)
      const appStore = useAppConfigStore()
      const showContact = ref(false)
      const menuWidth = ref(useMenuWidth())
      const themeList = reactive([
        {
          leftBg: '#ffffff',
          rightTopBg: '#ffffff',
          rightBottomBg: '#f5f5f5',
          checked: false,
          themeId: 'light',
          tipText: '明亮',
        },
        {
          leftBg: '#000000',
          rightTopBg: '#000000',
          rightBottomBg: '#333333',
          checked: false,
          themeId: 'dark',
          tipText: '暗黑',
        },
      ])
      const sideExampleList = reactive([
        {
          leftBg: '#000000',
          rightTopBg: '#ffffff',
          rightBottomBg: '#f5f5f5',
          checked: false,
          themeId: 'dark',
        },
        {
          leftBg: '#ffffff',
          rightTopBg: '#ffffff',
          rightBottomBg: '#f5f5f5',
          checked: false,
          themeId: 'white',
        },
        {
          leftBg: `url(${LeftBg})`,
          rightTopBg: '#ffffff',
          rightBottomBg: '#f5f5f5',
          checked: false,
          themeId: 'image',
        },
      ])
      const layoutExampleList = reactive([
        {
          leftBg: '#000000',
          rightTopBg: '#d4d4d4',
          rightBottomBg: '#d4d4d4',
          checked: true,
          layoutId: 'ltr',
          tipText: '左右',
        },
        {
          leftBg: '#d4d4d4',
          rightTopBg: '#ffffff',
          rightBottomBg: '#d4d4d4',
          checked: false,
          layoutId: 'ttb',
          class: 'extra-class',
          tipText: '上下',
        },
        {
          leftBg: '#000000',
          rightTopBg: '#d4d4d4',
          rightBottomBg: '#d4d4d4',
          checked: false,
          layoutId: 'lcr',
          class: 'extra-class-1',
          tipText: '分栏',
        },
      ])
      const primartyColorList = reactive([
        {
          name: 'cyan',
          value: '#165dff',
          checked: true,
        },
        {
          name: 'blue',
          value: '#409eff',
          checked: false,
        },
        {
          name: 'red',
          value: '#F5222D',
          checked: false,
        },
        {
          name: 'purple',
          value: '#722ED1',
          checked: false,
        },
        {
          name: 'ee4f12',
          value: '#ee4f12',
          checked: false,
        },
        {
          name: '0096c7',
          value: '#0096c7',
          checked: false,
        },
        {
          name: 'ff9801',
          value: '#ff9801',
          checked: false,
        },
        {
          name: 'ff3d68',
          value: '#ff3d68',
          checked: false,
        },
        {
          name: '01c1d4',
          value: '#01c1d4',
          checked: false,
        },
        {
          name: '71efa3',
          value: '#71efa3',
          checked: false,
        },
        {
          name: '171010',
          value: '#171010',
          checked: false,
        },
        {
          name: '78dec7',
          value: '#78dec7',
          checked: false,
        },
        {
          name: '1768ac',
          value: '#1768ac',
          checked: false,
        },
        {
          name: '1427df',
          value: '#1427df',
          checked: false,
        },
        {
          name: 'D022FF',
          value: '#D022FF',
          checked: false,
        },
        {
          name: 'BB59F0',
          value: '#BB59F0',
          checked: false,
        },
        {
          name: 'B6DAF0',
          value: '#B6DAF0',
          checked: false,
        },
        {
          name: '14DAF0',
          value: '#14DAF0',
          checked: false,
        },
      ])
      const animOptions = reactive([
        {
          label: '渐隐渐现',
          value: 'opacity',
        },
        {
          label: '左右滑动',
          value: 'fade',
        },
        {
          label: '上下滑动',
          value: 'down',
        },
        {
          label: '缩放效果',
          value: 'scale',
        },
      ])
      onMounted(() => {
        themeList.forEach((it) => {
          it.checked = appStore.theme === it.themeId
        })
        sideExampleList.forEach((it) => {
          it.checked = appStore.sideTheme === it.themeId
        })
        layoutExampleList.forEach((it) => {
          it.checked = appStore.layoutMode === it.layoutId
        })
        primartyColorList.forEach((it) => {
          it.checked = appStore.themeColor === it.value
        })
      })

      function openDrawer() {
        opened.value = true
      }

      function themeClick(item: any) {
        themeList.forEach((it) => {
          it.checked = it === item
        })
        if (item.themeId === ThemeMode.DARK) {
          exampleClick(sideExampleList[0])
        }
        appStore.changeTheme(item.themeId)
      }

      function exampleClick(item: any) {
        if (appStore.theme === ThemeMode.DARK) {
          Message.error('深色模式下不能更改侧边栏颜色')
          return
        }
        sideExampleList.forEach((it) => {
          it.checked = it === item
        })
        appStore.changeSideBarTheme(item.themeId)
      }

      function layoutExampleClick(item: any) {
        layoutExampleList.forEach((it) => {
          it.checked = it === item
        })
        appStore.changeLayoutMode(item.layoutId)
      }

      function colorClick(item: any) {
        primartyColorList.forEach((it) => {
          it.checked = it === item
        })
        appStore.changePrimaryColor(item.value)
      }

      function onShowTabbar(val: boolean) {
        // appStore.changeShowTabbar(val)
      }

      function openAppInfo() {
        appInfoDialog.value?.toggle()
      }

      function onAnimUpdate(val: any) {
        appStore.changePageAnim(val)
      }

      watch(
        () => menuWidth.value,
        (newVal) => {
          appStore.changeSideWidth(newVal)
        }
      )
      return {
        appStore,
        appInfoDialog,
        showContact,
        opened,
        themeList,
        sideExampleList,
        layoutExampleList,
        primartyColorList,
        openDrawer,
        themeClick,
        exampleClick,
        onShowTabbar,
        layoutExampleClick,
        onAnimUpdate,
        colorClick,
        openAppInfo,
        animOptions,
        menuWidth,
      }
    },
  })
</script>

<style lang="less">
  .dark {
    .el-drawer {
      background-color: #272727 !important;
    }
  }

  .light,
  .dark-side,
  .blue-side {
    .el-drawer {
      background-color: #ffff !important;
    }
  }
</style>
<style lang="less" scoped>
  @width: 60px;

  :deep(.scrollbar__bar.is-horizontal) {
    display: none;
  }

  .wrapper {
    margin-top: -16px;

    .close-wrapper {
      text-align: right;
      font-size: 20px;
    }

    .color-wrapper {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid #c1c1c1;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .circle::after {
      content: '';
      display: block;
      margin: 0 auto;
      margin-top: 25px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgb(3, 190, 50);
      text-align: center;
    }

    .setting-item-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      font-size: 14px;
    }
  }
</style>
